<!--景区列表-->
<template>
    <div class="mod-datasource">
        <div style="background: #fff; width: 100%; padding: 15px 15px 0 15px; height: 100px">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" size="small">
                <el-form-item label="选择供应商:">
                    <el-select v-model="dataForm.spotStatus" placeholder="全部" clearable>
                        <el-option label="上架" :value="1"></el-option>
                        <el-option label="下架" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入账时间:">
                  <el-date-picker v-model="createTimeRange" type="daterange" :default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd  HH:mm:ss" placeholder="入账时间" clearable start-placeholder="选择日期" end-placeholder="选择日期">
                </el-date-picker>
               </el-form-item>
                <el-form-item label=" ">
                    <el-button @click="queryReset()" size="small">重置</el-button>
                    <el-button @click="getDataList()" type="primary" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
            <el-table v-loading="dataListLoading" :data="dataList" style="width: 100%" :height="tableHeight" @sort-change="dataListSortChangeHandle" :header-cell-style="{background: '#DBEDF6'}">
                <el-table-column prop="spotId" label="供应商" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="cityName" label="景区名称" header-align="center" align="center"></el-table-column>
                <el-table-column prop="sales" label="资源名称" header-align="center" align="center"></el-table-column>
                <el-table-column prop="orderStatus" label="订单金额" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="status" label="入账时间" header-align="center" align="center" min-width="100">
                </el-table-column>
              <el-table-column prop="status" label="入账金额" header-align="center" align="center" min-width="100">
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="limit"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChangeHandle"
                    @current-change="pageCurrentChangeHandle">
            </el-pagination>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>是否{{updataText}}该景区</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="updataClick">确 定</el-button>
            </span>
          </el-dialog>
          <el-row style="margin-top:20px;">
            <el-card style="height:80px">
            <el-col :span="5">天时同城入账金额:1000</el-col>
            <el-col :span="3">携程入账金额:1000</el-col>
            <el-col :span="3">总金额:1000</el-col>
            <el-col :span="5">
              <el-select v-model="dataForm.spotStatus" placeholder="全部" clearable>
                        <el-option label="上架" :value="1"></el-option>
                        <el-option label="下架" :value="0"></el-option>
               </el-select>
            </el-col>
            <el-col :span="5">
              <el-date-picker v-model="createTimeRange" type="daterange" :default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" clearable start-placeholder="选择日期" end-placeholder="选择日期">
                </el-date-picker>
            </el-col>
            </el-card>

          </el-row>
        </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/spot/getSpotList',
        getDataListIsPage: true,
        deleteURL: '/devtools/datasource',
        deleteIsBatch: true
      },
      dataForm: {
        spotId: undefined,
        spotName: undefined,
        spotStatus: undefined,
        cityId: undefined
      },
      tableHeight: null,
      date: [],
      isNoteCheck: false,
      dataNote: [],
      dialogVisible: false,
      updataText: undefined

    }
  },
  components: {
  },
  watch: {
    createTimeRange (newVal, oldVal) {
      console.log('newVal', newVal)
      if (newVal == null) {
        this.dataForm.beginSettlementDate = null
        this.dataForm.endSettlementDate = null
      } else {
        this.dataForm.beginSettlementDate = newVal[0]
        this.dataForm.endSettlementDate = newVal[1]
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.tableHeight = document.documentElement.clientHeight - 310
    })
  },
  methods: {
    updataFun (id, status) {
      status == '0' ? this.updataText = '上架' : this.updataText = '下架'
      this.dialogVisible = true
    },
    updataClick (id) {
      this.$http.get('/spot/updateSpotStatus', { params: { spotId: id } }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.getDataList()
          return this.$message.success(res.msg)
        }
      }).catch(() => {})
    },
    queryReset () {
      this.dataForm = {}
      this.date = null
      this.getDataList()
    }
  }
}
</script>
<style scoped>

</style>
